<template>
  <div class="findpwd-container">
    <el-button type="primary" color="#fff" class="back-login" round @click="backToLogin"
      >返回</el-button
    >
    <div class="findpwd-box">
      <div class="title">找回密码</div>
      <div class="content">
        <div class="desc">输入账号与绑定的邮箱</div>
        <el-form :model="emailForm.val">
          <div class="email-input">
            <el-input v-model="emailForm.val.username" placeholder="账号" size="large" />
          </div>
          <div class="email-input">
            <el-input v-model="emailForm.val.email" placeholder="电子邮箱" size="large" />
          </div>
        </el-form>
        <div class="confirm-btn">
          <el-button
            type="primary"
            size="large"
            color="#f2f2f2"
            round
            class="btn"
            @click="findPassword"
            >确定</el-button
          >
        </div>
        <div class="message">为提高找回密码的成功率，建议在经常使用的设备上操作。</div>
      </div>
    </div>
  </div>
</template>
<script setup name="FindPasswordPage">
import { useRouter } from 'vue-router'
import { useUser } from '../hooks/useUser'
const { emailForm, findPassword } = useUser()
const router = useRouter()
function backToLogin() {
  router.replace('/')
}
</script>
<style lang="less" scoped>
.findpwd-container {
  width: 100%;
  height: 100%;
  background: #f1f1f1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .back-login {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px;
  }
  .findpwd-box {
    width: 960px;
    height: 550px;
    background: #fff;
    .title {
      padding: 20px 0;
      border-bottom: 2px solid #f7f7f7;
      color: #333;
      text-align: center;
      font-size: 24px;
      font-weight: 600;
    }
    .content {
      width: 440px;
      height: auto;
      min-height: 350px;
      margin: 0 auto;
      .desc {
        padding: 40px 16px 23px;
        font-size: 16px;
        color: #333;
      }
      .email-input {
        padding: 10px 20px;
        .el-input__wrapper {
          border-radius: 95px;
          border: 0;
          box-shadow: 0 0 0 0px;
          background: #f7f7f7;
          color: #191919;
        }
      }
      .confirm-btn {
        margin: 40px 0 50px;
        text-align: center;
        .btn {
          width: 200px;
          color: #007dff;
        }
      }
      .message {
        color: #191919;
        font-size: 14px;
        line-height: 14px;
        text-align: center;
      }
    }
  }
}
</style>
